<template>
  <header>
    <div class="header-top">
      <div class="ht-left">
        <i class="iconfont icon-dingwei"></i>
        <div class="toolbar">
          <span v-if="position.loaded">
            {{ position.address }}
          </span>
          <span v-else>获取地址中...</span>
        </div>
        <i class="iconfont icon-sanjiaoxing-xia"></i>
      </div>
  
      <div class="ht-right">
        <div>
          <h3>{{centigrade}}</h3>
          <span>{{wind}}</span>
        </div>
        <img :src="image_hash" alt="天气图标">
      </div>
    </div>
    <div class="header-middle">
      <router-link to='/search'>
        <input type="text" placeholder="搜索商家、商品" />
      </router-link>
    </div>
    <div class="header-bottom">
      <router-link to='/' v-for='(site,index) in sites' :key='index'>
        {{ site.word }}
      </router-link>
    </div>
  </header>
</template>

<script>
import axios from 'axios';
import { mapState } from 'vuex';
export default {
  name: 'header',
  computed: {
    ...mapState(['position'])
  },
  data() {
    return {
      centigrade: '',
      wind: '',
      image_hash: '',
      str: '',
      sites: []
    };
  },
  mounted() {
    this.$watch('position', function (newVal, oldVal) {
      //  得到经纬度
      // console.log(newVal);
      var lng = newVal.lng;
      var lat = newVal.lat;
      //  获取天气信息
      var that = this;
      var today = '';
      axios.get('http://localhost:3000/weather', {
        params: {
          lat: lat,
          lng: lng
        }
      }).then((succerCB) => {
        // console.log(succerCB);
        that.centigrade = succerCB.data.temperature + '°';
        that.wind = succerCB.data.description;
        today = succerCB.data.image_hash.split('');
        today[0] += '/';
        today[2] += '/';
        today = today.join('');
        var a = new RegExp('png');
        if (a.test(today)) {
          today += '.png';
        } else {
          today += '.jpeg';
        }
        that.image_hash = 'http://fuss10.elemecdn.com/' + today + '?imageMogr/format/webp/thumbnail/!69x69r/gravity/Center/crop/69x69/';
        // console.log(that.image_hash);
      }).catch((errorCB) => {
        console.log('天气网络异常，请稍后再试！');
      });
      axios.get('http://localhost:3000/hot_search_words', {
        params: {
          lat: lat,
          lng: lng
        }
      }).then((succerCB) => {
        // console.log(succerCB);
        that.sites = succerCB.data;
        // console.log(that.sites);
      }).catch((errorCB) => {
        console.log('关键字网络异常，请稍后再试！');
      })
    })
    var id = JSON.parse(sessionStorage.getItem('id'));
    //  得到经纬度
    if (id) {
      //  得到经纬度
      var lng = id.lng;
      var lat = id.lat;
      //  获取天气信息
      var that = this;
      var today = '';
      axios.get('http://localhost:3000/weather', {
        params: {
          lat: lat,
          lng: lng
        }
      }).then((succerCB) => {
        // console.log(succerCB);
        that.centigrade = succerCB.data.temperature + '°';
        that.wind = succerCB.data.description;
        today = succerCB.data.image_hash.split('');
        today[0] += '/';
        today[2] += '/';
        today = today.join('');
        var a = new RegExp('png');
        if (a.test(today)) {
          today += '.png';
        } else {
          today += '.jpeg';
        }
        that.image_hash = 'http://fuss10.elemecdn.com/' + today + '?imageMogr/format/webp/thumbnail/!69x69r/gravity/Center/crop/69x69/';
        // console.log(that.image_hash);
      }).catch((errorCB) => {
        // console.log('网络异常，请稍后再试！');
        console.log('天气网络异常，请稍后再试！');
      });
      axios.get('http://localhost:3000/hot_search_words', {
        params: {
          lat: lat,
          lng: lng
        }
      }).then((succerCB) => {
        // console.log(succerCB);
        that.sites = succerCB.data;
        // console.log(that.sites);
      }).catch((errorCB) => {
        // console.log('网络异常，请稍后再试！');
        console.log('关键字网络异常，请稍后再试！');
      })
    }
  }
};
</script>

<style lang='scss' scoped>
@import '../../static/hotcss/px2rem.scss';
header {
  height: px2rem(122);
  padding: px2rem(10) px2rem(14);
  box-sizing: border-box;
  background-image: linear-gradient(to right, #00AAFF 0%, #0086FF 100%);
  .header-top {
    display: flex;
    justify-content: space-between;
    height: px2rem(69/2);
    .ht-left {
      line-height: px2rem(69/2);
      width: 60%;
      color: #FFF;
      .icon-dingwei {
        vertical-align: top;
        font-size: px2rem(18);
      }
      .amap-demo {
        display: none;
      }
      .toolbar {
        vertical-align: top;
        display: inline-block;
        max-width: 80%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        span {
          font-size: px2rem(18);
          display: inline-block;
          width: 100%;
        }
      }
      .icon-sanjiaoxing-xia {
        display: inline-block;
        vertical-align: top;
      }
    }
    .ht-right {
      >div {
        display: inline-block;
        color: #FFF;
        h3 {
          font-size: px2rem(14);
          margin-bottom: px2rem(-5);
          font-weight: normal;
          text-align: center;
        }
        span {
          font-size: px2rem(12);
        }
      }
      img {
        width: px2rem(55/2);
        font-size: px2rem(10);
        display: inline-block;
        color: #FFF;
      }
    }
  }
  .header-middle {
    // height: px2rem(35);
    a {
      height: 100%;
      display: block;
      input {
        width: 100%;
        height: px2rem(35);
        border: 0;
        padding: 0;
        border-radius: px2rem(30);
        margin: px2rem(15/2) 0;
        text-align: center;
        line-height: px2rem(35);
        font-size: px2rem(13);
      } // 兼容写 placeholder 的颜色
       ::-webkit-input-placeholder {
        /* WebKit browsers */
        color: #333;
      }
       :-moz-placeholder {
        /* Mozilla Firefox 4 to 18 */
        color: #333;
        opacity: 1;
      }
       ::-moz-placeholder {
        /* Mozilla Firefox 19+ */
        color: #333;
        opacity: 1;
      }
       :-ms-input-placeholder {
        /* Internet Explorer 10+ */
        color: #333;
      }
    }
  }
  .header-bottom {
    width: 100%;
    overflow: scroll;
    white-space: nowrap;
    a {
      font-size: px2rem(12);
      color: #FFF;
      margin-right: px2rem(15);
    }
  }
}
</style>
